<template>
  <div class="carouselConfig">
    <el-table ref="multipleTable" :data="carouselList" tooltip-effect="dark" @selection-change="handleSelectionChange" style="width:100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="轮播标题" min-width="80">
        <template slot-scope="scope">{{scope.row.title}}</template>
      </el-table-column>
      <el-table-column label="跳转链接" min-width="80">
        <template slot-scope="scope">{{scope.row.href}}</template>
      </el-table-column>
      <el-table-column label="展示图片" min-width="80">
        <template slot-scope="scope">
          <img class="carouselImg" :src="scope.row.imgUrl" :alt="scope.row.title">
      </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="下移" placement="bottom" :enterable="false">
            <el-button @click="changeOrder(scope.$index, 1)" type="warning" size="mini" icon="el-icon-download" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="上移" placement="bottom" :enterable="false">
            <el-button @click="changeOrder(scope.$index, -1)" type="warning" size="mini" icon="el-icon-upload2" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom" :enterable="false">
            <el-button @click="deleteSingle(scope.$index)" type="danger" size="mini" icon="el-icon-delete" circle></circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="编辑" placement="bottom" :enterable="false">
            <el-button @click="showEditModal(scope.row.id)" type="primary" size="mini" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div class="tableFoot">
      <div class="btnGroup">
        <el-button @click="deleteMulti" type="danger" :disabled="selectData.length===0" icon="el-icon-delete">批量删除</el-button>
        <el-button @click="editCarousel" type="success" :disabled="!hasChanged" :loading="false" icon="el-icon-upload">确认修改</el-button>
      </div>
    </div>
    
  </div>
</template>

<script>
  import { hasChangedJsonList } from '@/utils/equals.js';
  export default {
    name: 'carouselConfig',
    components: {
    },
    data(){
      return {
        carouselList: this.$test.carouselList,
        carouselListOld: this.$test.carouselListOld,
        hasChanged: false,
        selectData: []
      }
    },
    watch: {
      carouselList(val){
        this.hasChanged = hasChangedJsonList(this.carouselListOld, val);
      }
    },
    methods: {
      deleteSingle(index){
        this.$confirm('删除操作不可恢复, 确定删除?', this.$store.state.warningTip, {
          type: 'warning'
        }).then(() => {
          this.carouselList.splice(index,1);
          this.$message.success('删除成功');
        }).catch(()=>{});
      },
      editCarousel(){
        console.log('确认修改');
      },
      handleSelectionChange(selectData){  //批量选择表格
        this.selectData = selectData;
      },
      deleteMulti(){
        this.$confirm('删除操作不可恢复, 确定批量删除' + this.selectData.length + '条数据?', this.$store.state.warningTip, {
          type: 'warning'
        }).then(() => {
          this.selectData.forEach(item =>{
            let deleteIndex = this.carouselList.findIndex(index => index.id === item.id)
            this.carouselList.splice(deleteIndex,1);
          });
          this.$message.success('删除成功');
        }).catch(()=>{});
      },
      changeOrder(index, param){
        if(index === 0 && param === -1){
          this.$message.error('当前已经是第一个了');
          return;
        }
        if(index === this.carouselList.length-1 && param === 1){
          this.$message.error('当前已经是最后了');
          return;
        }
        let temp = this.carouselList[index + param];
        this.$set(this.carouselList, index + param, this.carouselList[index]);
        this.$set(this.carouselList, index, temp);
      },
    },
    mounted(){
    }
  }
</script>

<style lang="scss" scoped>
.carouselConfig{
  .carouselImg{
    width: 200px;
    height: 100px;
  }
  .tableFoot{
    .btnGroup{
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>